<template>
  <div class="app-container" v-if="data.jvmInfo">

    <!-- 系统信息 -->
    <el-row :gutter="24">
      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header"><span>系统信息</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <thead>
              <tr>
                <th class="is-leaf">
                  <div class="cell">操作系统</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">体系结构</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">处理程序数</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">提交的虚拟内存</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">总物理内存</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">空闲物理内存</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">总交换空间</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">空闲交换空间</div>
                </th>
              </tr>
              </thead>
              <tbody>
              <tr v-if="data.systemInfo">
                <td>
                  <div class="cell">{{ data.systemInfo.name + " " + data.systemInfo.version }}</div>
                </td>
                <td>
                  <div class="cell">{{ data.systemInfo.arch }}</div>
                </td>
                <td>
                  <div class="cell">{{ data.systemInfo.availableProcessors }}</div>
                </td>
                <td>
                  <div class="cell">{{ data.systemInfo.committedVirtualMemorySize }}</div>
                </td>
                <td>
                  <div class="cell">{{ data.systemInfo.totalPhysicalMemorySize }}</div>
                </td>
                <td>
                  <div class="cell">{{ data.systemInfo.freePhysicalMemorySize }}</div>
                </td>
                <td>
                  <div class="cell">{{ data.systemInfo.totalSwapSpaceSize }}</div>
                </td>
                <td>
                  <div class="cell">{{ data.systemInfo.freeSwapSpaceSize }}</div>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 线程、类信息 -->
    <el-row :gutter="24">
      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header"><span>jvm信息</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <thead>
              <tr>
                <th class="is-leaf">
                  <div class="cell">名称</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">虚拟机</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">供应商</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">启动时间</div>
                </th>
              </tr>
              </thead>
              <tbody v-if="data.jvmInfo">
              <tr>
                <td>
                  <div class="cell">{{ data.jvmInfo.name }}</div>
                </td>
                <td>
                  <div class="cell">{{ data.jvmInfo.vmName + " " + data.jvmInfo.vmVersion }}</div>
                </td>
                <td>
                  <div class="cell">{{ data.jvmInfo.vmVendor }}</div>
                </td>
                <td>
                  <div class="cell">{{ data.jvmInfo.startTime }}</div>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header"><span>线程信息</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <thead>
              <tr>
                <th class="is-leaf">
                  <div class="cell">活动线程</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">峰值</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">守护程序线程</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">启动的线程总数</div>
                </th>
              </tr>
              </thead>
              <tbody v-if="data.threadInfo">
              <tr>
                <td>
                  <div class="cell">{{ data.threadInfo.liveThreadCount }}</div>
                </td>
                <td>
                  <div class="cell">{{ data.threadInfo.livePeakThreadCount }}</div>
                </td>
                <td>
                  <div class="cell">{{ data.threadInfo.daemonThreadCount }}</div>
                </td>
                <td>
                  <div class="cell">{{ data.threadInfo.totalStartedThreadCount }}</div>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 堆内存、非堆内存信息 -->
    <el-row :gutter="24">
      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header"><span>堆内存信息</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <thead>
              <tr>
                <th class="is-leaf">
                  <div class="cell">初始值</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">已用</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">已提交</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">最大值</div>
                </th>
              </tr>
              </thead>
              <tbody v-if="data.heapMemoryUsage">
              <tr>
                <td>
                  <div class="cell">{{ data.heapMemoryUsage.init }}</div>
                </td>
                <td>
                  <div class="cell">{{ data.heapMemoryUsage.used }}</div>
                </td>
                <td>
                  <div class="cell">{{ data.heapMemoryUsage.committed }}</div>
                </td>
                <td>
                  <div class="cell">{{ data.heapMemoryUsage.max }}</div>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header"><span>非堆内存信息</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <thead>
              <tr>
                <th class="is-leaf">
                  <div class="cell">初始值</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">已用</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">已提交</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">最大值</div>
                </th>
              </tr>
              </thead>
              <tbody v-if="data.nonHeapMemoryUsage">
              <tr>
                <td>
                  <div class="cell">{{ data.nonHeapMemoryUsage.init }}</div>
                </td>
                <td>
                  <div class="cell">{{ data.nonHeapMemoryUsage.used }}</div>
                </td>
                <td>
                  <div class="cell">{{ data.nonHeapMemoryUsage.committed }}</div>
                </td>
                <td>
                  <div class="cell">{{ data.nonHeapMemoryUsage.max }}</div>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 类加载、垃圾回收信息 -->
    <el-row :gutter="24">
      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header"><span>类加载信息</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <thead>
              <tr>
                <th class="is-leaf">
                  <div class="cell">已加装类总数</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">已加装当前类</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">已卸载类总数</div>
                </th>
              </tr>
              </thead>
              <tbody v-if="data.classLoadingInfo">
              <tr>
                <td>
                  <div class="cell">{{ data.classLoadingInfo.totalLoadedClassCount }}</div>
                </td>
                <td>
                  <div class="cell">{{ data.classLoadingInfo.loadedClassCount }}</div>
                </td>
                <td>
                  <div class="cell">{{ data.classLoadingInfo.unloadedClassCount }}</div>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header"><span>垃圾收集信息</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <thead>
              <tr>
                <th class="is-leaf">
                  <div class="cell">名称</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">收集数量</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">耗时</div>
                </th>
              </tr>
              </thead>
              <tbody v-if="data.garbageCollectorInfo">
              <tr v-for="collector in data.garbageCollectorInfo">
                <td>
                  <div class="cell">{{ collector.name }}</div>
                </td>
                <td>
                  <div class="cell">{{ collector.collectionCount }}</div>
                </td>
                <td>
                  <div class="cell">{{ collector.collectionTime }}</div>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- jvm参数信息-->
    <el-row v-if="data.jvmInfo">
      <el-col :span="24">
        <div style="background-color: white; border-radius: 5px;">
          <el-collapse style="padding-left: 10px">
            <el-collapse-item title="VM参数">
              <div style="color: #666666" v-for="params in data.jvmInfo.inputArguments">
                <div v-text="params"></div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import {list} from "@/api/boomMonitor/jmx";

export default {
  name: "jmx",
  data() {
    return {
      loading: true,
      data: {}
    }
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      list(this.$route.query).then(response => {
        this.data = response;
        this.loading = false;
      }).catch(e => {
        this.msgError("拒绝连接，请检查IP及端口号是否正确");
      });
    }
  }
}
</script>

<style scoped>

</style>
